import './index.scss'
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { setQuestions, setAnswersId } from '../../store/modules/questionnaire'
import type { Ques, Answer } from '../../store/index.ts'
import { useNavigate } from 'react-router-dom'

export default function Index() {
    const [ques, setQues] = useState<Ques[]>([])
    const [num, setNum] = useState(1)
    const [isSelected, setIsSelected] = useState(false)
    const [selectedAnser, setSelectedAnser] = useState<Answer>()

    const dispatch = useDispatch()
    const navigate = useNavigate()
    const getData = async () => {
        const response = await fetch('https://mock.mengxuegu.com/mock/6767738f98077b17fe6792e2/question-naire')
        const data = await response.json()
        console.log(data)
        dispatch(setQuestions(data.questions))//存仓库给结果页面使用
        setQues(data.questions)//存当前页面使用
    }
    useEffect(() => {  //组件初次加载
        getData()
    }, [])

    const selectAnswer = (item: Answer) => {
        //将用户选择的答案id存到仓库
        setSelectedAnser(item)
        setIsSelected(true)
    }

    const nextTopic = () => {
        setIsSelected(false)
        if (!isSelected) {
            alert('请选择答案')
            return
        }
        if (num === ques.length) {
            //跳页面
            navigate('/result')
        } else {
            if (selectedAnser) {
                dispatch(setAnswersId(selectedAnser.topic_answer_id))
            }
            setNum(num + 1)
        }
    }
    return (
        <div className='question-containner'>
            <div className="question-containner-hd">
                <div className="question-containner-hd-title">第 {num}/{ques.length}题</div>
                <div className="question-containner-hd-progress">
                    <div className="question-containner-hd-progress-bar" style={{ width: `${(num) / ques.length * 100}%` }}></div>
                </div>
            </div>
            <div className="question-containner-bd">
                <div className="question-containner-bd-option">
                    <div className="question-containner-bd-option-card">
                        <div className="order">Q{num}</div>
                        <div className="title">{ques[num - 1]?.topic_name}?</div>
                        <ul className='list'>
                            {
                                ((ques[num - 1]?.topic_answer || []) as Answer[]).map((item: Answer) => {
                                    return (
                                        <li key={item.topic_answer_id}>
                                            <input
                                                type="radio"
                                                name='item'
                                                id={`item${item.topic_answer_id}`}
                                                onChange={() => selectAnswer(item)} />
                                            <label htmlFor={`item${item.topic_answer_id}`}>{item.answer_name}</label>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                </div>
            </div>
            <div className="question-containner-ft">
                <div className='question-containner-ft-btn' onClick={nextTopic}>
                    {num === ques.length ? '提交' : '下一题'}
                </div>
            </div>
        </div>
    )
}

